<template>
    <div class="liveSet">
        <div class="liveSet_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">系统配置<i class="el-icon-close"></i></div>
		</div>
        <!-- <div class="partnerList_table">
            <div class="partnerList_bottom_table">
				<table>
					<tr>
						<th></th>
						<th>序号</th>
						<th>配置名称</th>
						<th>配置值</th>
						<th>创建时间</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<tr v-for="(v,i) in tableList" :key="i">
						<td>
							<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
						</td>
						<td>{{v.id}}</td>
						<td>{{v.name}}</td>
						<td>{{v.value}}</td>
						<td>{{$moment(v.create_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</td>
						<td>{{v.status==0?'禁用':v.status==1?'正常':''}}</td>
						<td>
                            <button class="editor" :class="{'delete':v.status==1}"  @click="toChange(v.id,v.status)">{{v.status==0?'开启':'关闭'}}</button>
						</td>
					</tr>
					<tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
				</table>
				<div class="partnerList_bottom_page">
					<div class="partnerList_bottom_page_left">
						<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
							<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
						</div>全选
					</div>
					<div class="partnerList_bottom_page_right">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total"
							background>
						</el-pagination>
					</div>
				</div>
			</div>
        </div> -->
		
		
		<div class="content">
			<el-button @click="refreshFn" size="small" type="primary">刷新缓存</el-button>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane v-for="(item,index) in groupList"  :key="index" :label="item.label" :name="item.key">
					<div class="dataList" v-for="(item1,index1) in dataList" :key="index1">
						<span>配置名称：{{item1.title}}</span>
						<p style="margin-top:10px;display:flex;align-items:center;">
							配置值：
							<template v-if ="item1.type==0">
								<el-input v-model.number="item1.value" type="tel"  @input="item1.value = String(item1.value).replace(/[^\d]/g,'')"></el-input>
							</template>
							<template v-if="item1.type==1">
								<el-input v-model="item1.value" type="text"></el-input>
							</template>
							<template v-if="item1.type==2">
								<el-input
									style="width:50%;"
									type="textarea"
									:rows="2"
									placeholder="请输入内容"
									v-model="item1.value">
								</el-input>
							</template>
							<template v-if="item1.type==3">
								<el-checkbox-group v-model="item1.value">
									<el-checkbox v-for="(checkItem,checkIndex) in item1.extra" :key="checkIndex" :label="checkItem.key">{{checkItem.value}}</el-checkbox>
								</el-checkbox-group>
							</template>
							<template v-if="item1.type==4">
								<el-radio-group v-model="item1.value">
									<el-radio v-for="(radioItem,radioIndex) in item1.extra" :key="radioIndex" :label="radioItem.key">{{radioItem.value}}</el-radio>
								</el-radio-group>
							</template>
						</p>
					</div>
					<el-button v-if="dataList.length" @click="sysSubmitFn" size="small" type="primary">提交</el-button>
				</el-tab-pane>
			</el-tabs>
		</div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                checkAll:false,
                page:1,
                pageSize:10,
                total:0,
                checkBoxAll:[],				// 选中的数据
                shelvesAlls:[],
                tableList:[],
                groupList:[],
                dataList:[],
                activeName:''
            }
        },
        mounted() {
            // this.getSetList()
			this.getSystem()
        },
        methods: {
			// 获取配置信息
			getSystem(){
				let params = {
					type:this.activeName=='0'?'':this.activeName
				}
				this.$http.post('/api/root/SystemConfig/index',params).then(res=>{
					console.log(res,'配置信息');
					if(res.code==1){
						let obj = res.data.group
						let arr = []
						for(let i in obj){
							arr.push({
								key:i,
								label:obj[i]
							})
						}
						this.activeName = res.data.type.toString()
						res.data.list.map(item=>{
							if(item.type==3 || item.type==4){
								let arr = []
								item.extra = item.extra.split(',')
								item.extra.map(item1=>{
									item1 = item1.split(':');
									let obj = {
										key:item1[0],
										value:item1[1]
									}
									arr.push(obj)
								})
								item.extra = arr
							}
							if(item.type==3){
								item.value = item.value.split(',')
							}
						})
						this.dataList = res.data.list
						console.log(this.dataList,'配置信息列表');
						this.groupList = arr
						console.log(this.groupList,'----');
					}
				})
			},

			// 刷新缓存
			refreshFn(){
				this.$http.post('/api/root/SystemConfig/refresh').then(res=>{
					console.log(res,'刷新缓存');
					if(res.code==1){
						this.$message.success('刷新成功')
						this.getSystem()
					}else{
						this.$message.warning(res.msg)
					}
				})
			},

			// 切换tabs
			handleClick(e){
				this.getSystem()
			},

			// 提交按钮
			sysSubmitFn(){
				// let arr = []
				let obj = {}
				console.log(this.dataList,'====');
				this.dataList.map(item=>{
					if(item.type==3){
						item.value = item.value.join(',')
					}
					obj[item.name] = item.value
				})
				let params = {
					config:JSON.stringify(obj)
				}
				this.$http.post('/api/root/SystemConfig/save',params).then(res=>{
					console.log(res,'====');
					if(res.code==1){
						this.$message.success('提交成功')
						this.getSystem()
					}else{
						this.$message.warning(res.msg)
					}
				})
			},

            // 获取直播配置列表o
            getSetList(){
                let params = {
                    page:this.page,
                    pagesize:this.pageSize
                }
                this.$http.post('/api/root/SystemConfig/index',params).then(res=>{
                    console.log(res,'直播配置');
                    if(res.code==1){
                        this.tableList = res.data.list?res.data.list:[];
                        this.total = res.data.total
                    }
                })
            },

            // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},

            //更改直播配置
            toChange(id,sta){
                let status = sta==0?1:0;
                this.$http.post('/api/root/SystemConfig/changeStatus',{id,status}).then(res=>{
                    console.log(res,'直播配置结果');
                    if(res.code==1){
                        this.$message.success('操作成功')
                        this.getSetList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            },

        	handleSizeChange(val) {
				this.pageSize = val;
				this.getEstateList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				this.getEstateList()
			},
        },
    }
</script>
<style lang="less">
    @import 'index.less';
	.liveSet .content .dataList span{
		margin:0;
	}
</style>